<template>
  <div>
    <div class="top">
      <p>AI识别结果</p>
    </div>
    <div class="selects">
      <el-row>
        <el-radio-group v-model="radio" class="tabs">
          <el-radio-button label="定时抓拍"></el-radio-button>
          <el-radio-button label="异常抓拍"></el-radio-button>
        </el-radio-group>
      </el-row>
      <el-row>
        <el-form ref="form" :model="form" label-width="150px">
          <el-col :span="8">
            <el-form-item label="场景名称：">
              <el-select v-model="form.sceneName" placeholder="全部">
                <el-option label="全部" value="1"></el-option>
                <el-option label="场景1" value="2"></el-option>
                <el-option label="场景2" value="3"></el-option>
                <el-option label="场景3" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务名称：">
              <el-select v-model="form.taskName" placeholder="全部">
                <el-option label="全部" value="01"></el-option>
                <el-option label="任务1" value="02"></el-option>
                <el-option label="任务2" value="03"></el-option>
                <el-option label="任务3" value="04"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="摄像头名称">
              <el-select v-model="form.cameraName" placeholder="全部">
                <el-option label="全部" value="001"></el-option>
                <el-option label="SN235" value="002"></el-option>
                <el-option label="0002" value="003"></el-option>
                <el-option label="0003" value="004"></el-option>
                <el-option label="0004" value="005"></el-option>
                <el-option label="0005" value="006"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机器人名称：">
              <el-select v-model="form.robotName" placeholder="全部">
                <el-option label="全部" value="0001"></el-option>
                <el-option label="机器人1" value="0002"></el-option>
                <el-option label="机器人2" value="0003"></el-option>
                <el-option label="机器人3" value="0004"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间：">
              <el-date-picker v-model="time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="buttons">
            <el-button @click="reset()">重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <el-row>
      <el-col :span="6" v-for="card in 8" :key="card">
        <div class="card">
          <div class="content-left">
            <div class="img">
              <div></div>
            </div>
            <p>摄像头1</p>
            <p>2022/12/08 23:53:56</p>
          </div>
          <div class="content-right">
            <p class="first">任务名称：
              <span>任务1</span>
            </p>
            <p>任务编号：
              <span>任务001</span>
            </p>
            <p>场景名称：
              <span>场景1</span>
            </p>
            <p>场景编号：
              <span>CJ001</span>
            </p>
            <p>机器人名称：
              <span>234测试机器狗</span>
            </p>
            <p>机器人编号：
              <span>SN235</span>
            </p>
          </div>
        </div>

      </el-col>
    </el-row>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="100"
      background align="center">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: '定时抓拍',
      currentPage: 1,
      time: '',
      form: {
        sceneName: '',
        taskName: '',
        cameraName: '',
        robotName: ''
      },
    }
  },
  methods: {
    reset() {
      this.form.sceneName = '',
        this.form.taskName = '',
        this.form.cameraName = '',
        this.form.robotName = '',
        this.time = ''
    },
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

.top {
  padding: 0 20px;
  height: 54px;
  display: flex;
  align-items: center;
  border: 2px solid rgba(230, 230, 230, 0.39);

  p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}

.selects {
  margin: 15px 0;
  border-bottom: 2px solid rgba(230, 230, 230, 0.39);
  .tabs{
    margin-bottom: 20px;
  }
  .buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

.card {
  display: flex;
  flex-wrap: nowrap;
  background: rgba(255, 255, 255, 0.39);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  margin: 0 10px 10px 0;
  padding: 21px 5px 21px 24px;

  .content-left {
    .img {
      width: 161px;
      height: 107px;

      div {
        width: 100%;
        height: 100%;
        background-image: url("../../../assets/robot/camera.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 4px;
        margin: auto;
      }
    }

    p {
      text-align: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      margin-top: 12px;
      line-height: 16px;
    }
  }

  .content-right {
    margin-left: 18px;

    p {
      &:not(.first) {
        margin-top: 12px;
      }

      color: #bfbfbf;

      span {
        color: #000000;
      }
    }
  }
}

/deep/ .el-pagination {
  position: fixed;
  bottom: 28px;
  left: 56%;
  transform: translate(-50%);
}

/deep/ .el-row {
  padding: 0 20px;
}
</style>